<template>
  <div class="container">
    <div id="map_container"></div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
 async mounted() {
    var map = initMap({
      style: whiteStyle,
      skyColors: [
        // 地面颜色
        'rgba(226, 237, 248, 0)',
        // 天空颜色
        'rgba(186, 211, 252, 1)'
      ]
    });

    var point = new BMapGL.Point(105.403119,38.028658);
    map.centerAndZoom(point, 5);

    var data = [];

    var citys = [
      '北京', '天津', '上海', '重庆', '石家庄', '太原', '呼和浩特', '哈尔滨',
      '长春', '沈阳', '济南', '南京', '合肥', '杭州', '南昌', '福州', '郑州',
      '武汉', '长沙', '广州', '南宁', '西安', '银川', '兰州', '西宁', '乌鲁木齐',
      '成都', '贵阳', '昆明', '拉萨', '海口'
    ];

    var randomCount = 300;

    // 构造数据
    // while (randomCount--) {
    //   var cityCenter = mapv.utilCityCenter.getCenterByCityName(citys[parseInt(Math.random() * citys.length, 10)]);
    //   data.push({
    //     geometry: {
    //       type: 'Point',
    //       coordinates: [cityCenter.lng - 2 + Math.random() * 4, cityCenter.lat - 2 + Math.random() * 4]
    //     },
    //     properties: {
    //       count: parseInt(4 * Math.random(), 10)
    //     }
    //   });
    // }

   const res = await axios.get('http://127.0.0.1:9002/visualization/index/getFigureLocAndLat')
   const pointList = res.data.data.FigureLocAndLatList
   pointList.forEach(item=>{
       data.push({
         geometry: {
           type: 'Point',
           coordinates: [item.lng, item.lat]
         },
         properties: {
           count: parseInt(4 * Math.random(), 10)
         }
       });
   })

    var view = new mapvgl.View({
      map: map
    });

    var pointLayer = new mapvgl.PointLayer({
      blend: 'lighter',
      size: 10,
      color: function (item) {
        // if (item.properties.count === 1) {
        //   return 'rgb(191, 67, 66, 0.8)';
        // }
        // else if (item.properties.count === 2) {
        //   return 'rgb(211, 139, 93, 0.8)';
        // }
        // else if (item.properties.count === 3) {
        //   return 'rgb(44, 85, 48, 0.8)';
        // }
        // else {
        //   return 'rgb(115, 158, 130, 0.8)';
        // }
        return 'rgb(191, 67, 66, 0.8)';
      }
    });

    view.addLayer(pointLayer);
    pointLayer.setData(data);
    console.log(data)

   // var view2 = new mapvgl.View({
   //   map: map
   // });
   //
   // const heatmap = new mapvgl.HeatmapLayer({
   //   size: 600, // 单个点绘制大小
   //   max: 40, // 最大阈值
   //   height: 0, // 最大高度，默认为0
   //   unit: 'm', // 单位，m:米，px: 像素
   //   gradient: { // 对应比例渐变色
   //     0.25: 'rgba(0, 0, 255, 1)',
   //     0.55: 'rgba(0, 255, 0, 1)',
   //     0.85: 'rgba(255, 255, 0, 1)',
   //     1: 'rgba(255, 0, 0, 1)'
   //   }
   // });
   //
   // view2.addLayer(heatmap);
   // heatmap.setData(data)



  }
}
</script>

<style scoped>

</style>
